﻿@model AidBrella.ViewModels.MappableViewModel

<script  type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script>

<script src="@Url.Content("~/Scripts/js/map.js")" type="text/javascript"></script>

@Html.Partial("Map")



<script type="text/javascript">
     $(function(){
        var map = GetMap(document.getElementById("mapDiv"), { center: new Microsoft.Maps.Location(5.80, 23.27), zoom: 3 });

        var updatePoints = function () {
            var center = map.getCenter();

            $.getJSON("/Index/ByLocation", { 'longitude': center.longitude, 'latitude': center.latitude }, function (data) {
                map.entities.clear();


                $.each(data.points, function (idx, item) {

                    var loc = new Microsoft.Maps.Location(item.lat, item.lon);

                    var pin = new Microsoft.Maps.Pushpin(loc);
                    var infoboxOptions = { width: 200, height: 100, showCloseButton: true, zIndex: 0, offset: new Microsoft.Maps.Point(-10, 0), showPointer: true };

                    Microsoft.Maps.Events.addHandler(pin, 'click', function () {
                        
                        testProject.projectId = item.id;
                        testProject.name = item.name; testProject.description = item.desc; testProject.pageUrl = "/Project/View/" + item.id;
                        testProject.duration = item.duration; testProject.contact = item.contact; testProject.sector = item.sector; testProject.followers = item.count;
                        
                        $.each(item.members, function (idx, member) {
                            testProject.members[idx].name = member.FirstName + " " + member.LastName;
                            testProject.members[idx].pageUrl = "/Profile/Account/" + member.UserId;
                        });
                        testProject.feeds.length = 0;
                        $.each(item.feeds, function (idx, feed) {

                            var newFeed = {
                                            "user": {
                                                        "pictureUrl": "/Content/dummydata/moustachuser.jpg",
                                                        "pageUrl": "/dumb/",
                                                        "name": "Johnny Cash",
                                                   },
                                             "text" : "status update",
                                              "date" : ""
                                          };

                            newFeed.user.name = feed.StatusBy;
                            newFeed.text = feed.StatusMessage;
                            newFeed.date = feed.PostedDate;
                            testProject.feeds.push(newFeed);
                        });
                       
                        makeProjectPopUp(testProject, true);
                    });

                    map.entities.push(pin);
                });
            });
        };

        var mapChange;

        Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () {
            if (mapChange) { clearTimeout(mapChange); }
            mapChange = setTimeout(updatePoints, 500);
        });
    });  
    
</script>

<script type="text/javascript"  src="@Url.Content("~/Scripts/js/feed.js")"></script>  


<script>
            function initPage() {
                // Setting-up welcome box
                $("#useAsGuestButton").button().click(function(){
                    $("#welcome").addClass("displayNone");
                     $("#welcome").hide();
                });
                $("#welcomeForm form input[type=button]").button();
                $("#signUpEmail").defaultValue();
                $("#loginEmail").defaultValue();
                $("#loginPassword").defaultValue();

                // loading user
                $.getJSON("/Index/GetLoggedInUser",  function (user) {
                    if(user.loggedIn != null){
                        loggedUser = {
                            "pictureUrl": "/Content/dummydata/moustachuser3.jpg",
                            "pageUrl": "/dumb/",
                            "name": "Sami Sam",
                        };

                        loggedUser.name = user.loggedIn.UserName;
                        loggedUser.pageUrl = user.loggedIn.PageUrl;
                        makeMenuBar(loggedUser);
                    }
                    else {
                        $("#welcome").removeClass("displayNone");
                         new PopUp($("#welcome"), $("#welcomeBox"), function(){makeMenuBar(loggedUser)});   
                         $("#welcomeLogin input[type=button]").click(function () {  
                            loginUser();                    
                         });
                    }
                });
            }

            // loading templates
            $(function(){
                $("#welcome").addClass("displayNone");
                $.get("/Content/jquery-tmpl/projectPopUp.html", function(projectPopUpText){
                $.get("/Content/jquery-tmpl/feedEntry.html", function(feedEntryText){
                $.get("/Content/jquery-tmpl/tagFix.html", function(tagFixText){
                $.get("/Content/jquery-tmpl/userSummary.html", function(userSummaryText){
                $.get("/Content/jquery-tmpl/userBubble.html", function(userBubble){
                $.get("/Content/jquery-tmpl/menuBar.html", function(menuBarText){
                    $(menuBarText).template("menuBar");
                    $(userBubble).template("userBubble");
                    $(userSummaryText).template("userSummary");
                    $(feedEntryText).template("feedEntry");
                    $(projectPopUpText).template("projectPopUp");
                    $(tagFixText).template("tagFix");
                    initPage();
                });});});});});});
            });

            function makeProjectPopUp(project, atNextClick) {
                var rendered = $.tmpl("projectPopUp", {"project": project, "loggedUser": loggedUser});
                fixRenderedTemplate(rendered);
                rendered.appendTo("body");
                $(".projectTabs .feedsTab", rendered).last().addClass("selectedTab");
                $(".projectInfo", rendered).addClass("displayNone");
                $(".projectTabs .feedsTab", rendered).click(function(){
                    $(this).addClass("selectedTab");
                    $(".infoTab").removeClass("selectedTab");
                    $(".projectFeeds", rendered).removeClass("displayNone");
                    $(".projectInfo", rendered).addClass("displayNone");
                });
                $(".projectTabs .infoTab", rendered).click(function(){
                    $(this).addClass("selectedTab");
                    $(".feedsTab").removeClass("selectedTab");
                    $(".projectInfo", rendered).removeClass("displayNone");
                    $(".projectFeeds", rendered).addClass("displayNone");
                });
                $("input[type=button]", rendered).button();
                $("input", rendered).defaultValue();
                new PopUp($(rendered), $(rendered), function(){}, atNextClick);
                //return rendered
            }

            function makeMenuBar(user) {
                var rendered = $.tmpl("menuBar", {loggedUser: user});
                fixRenderedTemplate(rendered);
                $("#menuBar").replaceWith(rendered);
            }


            //TEST
            var loggedUser = {
                "pictureUrl": "/Content/dummydata/moustachuser3.jpg",
                "pageUrl": "/dumb/",
                "name": "Sami Sam",
            };
            loggedUser = null;
          

            var testProject = {
                "projectId": "0",
                "pictureUrl": "/Content/dummydata/brickwall.jpg",
                "pageUrl": "/dumb/",
                "name": "AidBrella",
                "description": "Recording sessions took place at Columbia's 30th Street Studio over the course of three days in August 1969. Davis called the musicians to the recording studio on very short notice. A few pieces on Bitches Brew were rehearsed before the recording sessions, but at other times the musicians had little or no idea what they were to record.",
                "duration": "June 2012 - August 2020",
                "sector": "Nuggets",
                "contact": "John",
                "place": "All around",
                "followers": "91099109",
                "feeds": [
                    {
                        "user": {
                            "pictureUrl": "/Content/dummydata/moustachuser.jpg",
                            "pageUrl": "/dumb/",
                            "name": "Johnny Cash",
                        },
                        "text": "When I was just a baby, my mama told me 'son, always be a good boy, don't ever play with guns !'",
                        "date": "01/11/86"
                    },
                    {
                        "user": {
                            "pictureUrl": "/Content/dummydata/moustachuser2.jpg",
                            "pageUrl": "/dumb/2",
                            "name": "Eminem",
                        },
                        "text": "When I was just a little baby boy, my momma used to tell me these crazy things. She used to tell me my daddy was an evil man, she used to tell me he hated me",
                        "date": "01/11/86"
                    }
                ],
                "organisations": [
                    {
                        "name": "bla",
                        "pageUrl": "/dumb/"
                    },
                    {
                        "name": "bli",
                        "pageUrl": "/dumb/"
                    }
                ],
                "members": [
                    {
                        "pictureUrl": "/Content/dummydata/moustachuser.jpg",
                        "pageUrl": "/dumb/",
                        "name": "Johnny Cash",
                        "role": "Guitar&lyrics"
                    },
                    {
                        "pictureUrl": "/Content/dummydata/moustachuser2.jpg",
                        "pageUrl": "/dumb/2",
                        "name": "Eminem",
                        "role": "rap"
                    },
                ],
            };
        </script>

<div id="hiddenElements">

    <div id="welcome">
        <div id="welcomeBox" class="box boxRounded boxShadow">
            <div id="welcomeLogo"><img alt="aidbrella-ribbon" src="../../Content/images/aidbrella-logo-ribbon.png"></div>
            <div id="welcomeMessage">
                <p><span class="bold keyWord">Aidbrella</span> is a <span class="bold">social network</span> for <span class="bold">development aid workers</span>.</p>
                <p><span class="bold keyWord">Follow</span> projects, <span class="bold keyWord">connect</span> with others and <span class="bold keyWord">share</span> your ideas and knowledge.</p>
                <p>Sharing the good we do.</p>
            </div>
            <div id="welcomeForm">
                <div id="welcomeLogin">
                    <div class="title"><span class="bullet">1</span><span class="uppercase bold">Login</span> ... welcome back !</div>
                    <form>
                        <table>
                            <thead>
                            </thead>
                            <tbody>
                                <tr>
                                <td class="inputTd"><input type="text" name="email" id="loginEmail" placeholder="your.email@example.com"/></td>
                                <td class="inputTd"><input type="password" name="password" id="loginPassword" placeholder="type your password"/></td>
                                <td><input type="button" value="login"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div id="welcomeSignUp">
                    <div class="title"><span class="bullet">2</span><label for="signUpEmail"><span class="bold uppercase">Sign-up</span> with your email address</label></div>
                    <form>
                        <table>
                            <thead>
                            </thead>
                            <tbody>
                                <tr>
                                <td><input id="signUpEmail" type="text" name="email" placeholder="your.email@example.com"/></td>
                                <td><input type="button" value="Sign up"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div id="welcomeGuest">
                    <div class="title"><span class="bullet">3</span><button id="useAsGuestButton">Use as guest</button></div>
                </div>
            </div>
        </div>
    </div>
    <!-- END #welcome -->

</div>

